<template>
    <div class="content">
      <div class="banner" :style="{'height':bannerHeight+'px'}">
        <div class="header">
          <div class="name text-center">我的推荐费总额</div>
          <div class="name text-center"><span class="total">{{totalMoney}}</span>元</div>
        </div>
      </div>
      <div class="detailed" style="z-index: 0;">
        <div v-if="!hasData" class="noContent">
          <p>您还没有推荐奖励,快去推荐好友吧~</p>
          <button class="button" @click="goToFindJob()">去推荐</button>
        </div>
        <div v-else class="detailed-content">
          <p class="text-title">推荐明细</p>
          <div class="list" v-for="(item, index) in referralFeeList" :key='index'>
            <div class="text-md text-normal" style="flex: 6;text-overflow: ellipsis;overflow: hidden; white-space: normal;">
              推荐好友{{item.recmdedName}}去{{item.recmdedCompany}}
            </div>
            <div class="fr" style="flex: 4;align-items: center;text-align: right;">
              <div class="moeny">+<span class="text-md">{{item.recmdMoney}}</span>元</div>
              <div class="text-sm text-gray">{{item.createdAt | filterDate}}</div>
            </div>
          </div>
        </div>
      </div>
      <bottomMenu :menuType="menuType"></bottomMenu>
    </div>
</template>

<script>
import {getRecommends} from '@/controller'
import bottomMenu from './bottomMenu.vue'
export default {
  name: 'referralFee',
  data () {
    return {
      bannerHeight: window.innerWidth / (25 / 9),
      msg: 'referralFee ',
      hasData:true,
      referralFeeList:[],
      totalMoney:0.00,
      menuType:3,
    }
  },
  components: {
    'bottomMenu': bottomMenu
  },
  filters: {
    filterDate(date) {
      var date = new Date(date);
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + ' ';
      return Y + M + D;
    }
  },
  methods:{
      async init() {
        const result = await getRecommends();
        if (result.code == 0) {
          console.log(result);
          if(!result.data.list || result.data.list.length == 0) {
            this.hasData = false
          } else {
            this.hasData = true;
            this.referralFeeList = result.data.list;
            this.totalMoney = result.data.sum;
          }
        }
      },
  },
  mounted() {
    this.init();
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content{
    position: absolute;
    background: #f5f5f5;
    height: 100%;
    width: 100%;
    overflow: scroll;
}
.banner{
  background: url("/static/wechat/images/centerBg@2x.png");
  background-size: 100%;
  background-position-y: 70%;
}
.text-title{
  padding: 5px 0 10px 0;
}
.list{
  display: flex;
  align-items: center;
}

</style>
